<template>
    <div class="app">
        <div class="row_box">
            <div class="row_img">
                <image style="width: 250px;height: 250px;" :src="product.thumbnail"></image>
            </div>
            <div class="row_product">
                <div class="row_product_titleBox">
                    <text class="row_product_title">{{product.name}}</text>
                </div>
                <text class="row_product_subtitle">{{product.subTitle}}</text>
                <div class="row_product_bottom">
                    <div class="row_product_flex-end">
                        <text class="row_product_price">¥{{product.price}}</text>
                    </div>

                    <!--                    <div class="label_box">-->
                    <!--                        <activity tranString="460" :coupon="product.coupons" :promotions="product.promotions"></activity>-->
                    <!--                    </div>-->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    const storage = weex.requireModule('storage')
    export default {
        data(){
            return{

            }
        },
        props :[
            'product'
        ],
        methods:{
        }
    }
</script>

<style scoped>
    .app{
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 10px;
    }
    .row_box {
        display: flex;
        flex-direction: row;
        align-content: center;
        background-color: white;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        box-sizing: border-box;
        border-radius: 10px;
    }

    .row_img {
        width: 250px;
        height: 250px;
        overflow: hidden;
        border-radius: 6px;
        margin-top: 5px;
    }

    .row_product {
        margin-left: 20px;
        height: 255px;
        padding-right: 20px;
        /* box-sizing: border-box; */
        width: 420px;
        /*border-color: #f2f2f2;*/
        /*border-style: solid;*/
        /*border-bottom-width: 1px;*/
        position: relative;
        display: block;
        line-height: 40px;
        overflow: hidden;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    }

    .row_product_titleBox {
        display: flex;
        flex-direction: row;
        width: 420px;
    }

    .row_product_title {
        font-size: 28px;
        line-height: 40px;
        text-overflow: ellipsis;
        lines:2;
        width: 380px;
        display: block;
    }

    .row_product_subtitle {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.3);
        display: block;
        line-height: 40px;
        lines:1;
        text-overflow: ellipsis;
    }

    .row_product_bottom {
        position: absolute;
        bottom: 10px;
    }

    .label_box {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 10px;
    }

    .label_item {
        width: 100px;
        height: 32px;
        border-radius: 6px;
        /* background: linear-gradient(0deg, rgba(236, 95, 88, 1), rgba(255, 230, 230, 1)); */
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid rgba(236, 95, 88, 1);
    }

    .label_title {
        font-size: 20px;
        color: rgba(236, 95, 88, 1);
        line-height: 32px;
        height: 32px;
        display: block;
    }

    .row_product_price {
        font-size: 32px;
        color: rgba(231, 91, 83, 1);
        font-weight: 700;
        margin-right: 10px;
        display: block;
        line-height: 40px;
    }

    .label_evaluation {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.3);
        display: block;
        line-height: 36px;
    }

    .row_product_flex-end {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        /*margin-bottom: 4px;*/
    }

</style>
